﻿@model DataAccess.DB.XuatKho

@{
    ViewBag.Title = "Xuất kho";
}
<style>
    #NgayXuatKho {
        max-width: 200px;
    }

    #TongThanhToan {
        border: none;
        font-weight: bold;
    }

    #MaHoaDon {
        max-width: 200px;
    }

    #KhoID {
        max-width: 200px;
    }
    .row {
        padding-top:3px;
        padding-bottom:3px
    }
</style>
<script src="~/Scripts/CustomValidate.js"></script>
@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)
    @Html.HiddenFor(model => model.ID_NguoiXuatKho)

    <div class="row">
        <div class="col-sm-2">
            <span>Mã hóa đơn:</span>
        </div>
        <div class="col-sm-10">
            @Html.TextBoxFor(model => model.MaHoaDon, new { @Value = @ViewBag.MaHD, @maxlength = 17, @class = "form-control" })           
            @Html.ValidationMessageFor(model => model.MaHoaDon)
        </div>

    </div>
    <div class="row">
        <div class="col-sm-2">
            <span>Kho:
            </span>
        </div>
        <div class="col-sm-10">
            @Html.DropDownList("KhoID", "Chọn kho")
            @Html.ValidationMessageFor(model => model.KhoID)
        </div>
    </div>
    <div class="row">
        <div class="col-sm-2">
            Ngày xuất kho:
        </div>
        <div class="col-sm-10">
            @Html.EditorFor(model => model.NgayXuatKho)            
            @Html.ValidationMessageFor(model => model.NgayXuatKho)
        </div>
    </div>
    <div class="row">
        <div class="col-sm-2">
            <span>Khách hàng:</span>
        </div>
        <div class="col-sm-10">
            <div class="row">
                <div class="col-sm-3">
                    <div class="input-group">
                        @Html.HiddenFor(model => model.ID_KhachHang) @Html.TextBox("txtKhachHang", null, new { @class = "form-control", @placeholder = "Mã khách hàng" })
                        @Html.ValidationMessageFor(model => model.ID_KhachHang)

                        <span class="input-group-btn">
                            <a class="btn btn-primary" data-toggle="modal" id="myModal">
                                <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                            </a>
                        </span>
                    </div>
                </div>
                <div class="col-sm-3">
                    @Html.TextBox("txtNameKhachHang", null, new { @class = "form-control", @placeholder = "Tên khách hàng" })
                </div>
                <div class="col-sm-6">
                    @Html.TextBox("txtDiaChiKhachHang", null, new { @class = "form-control", @placeholder = "Địa chỉ khách hàng" })
                </div>
            </div>
        </div>
    </div>



    <div class="table-responsive">
        <table class="table-bordered" id="tb-dsSanPham">
            <thead>
                <tr>
                    <th class="col-sm-4">Mã sản phẩm</th>
                    <th class="col-sm-2">Số lượng</th>
                    <th class="col-sm-2">Giá</th>
                    <th class="col-sm-2">Thành tiền</th>
                    <th class="col-sm-1">Đơn vị</th>
                    <th class="col-sm-1">action</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
    <div class="row" style="padding-top: 3px">
        <div class="col-sm-8">
            <a href="#" id="btnAddSP" class="btn btn-link"><span class="glyphicon glyphicon-plus"></span>Thêm sản phẩm</a>
        </div>
        <div class="col-sm-4">
            Tổng tiền phải thanh toán: @Html.TextBoxFor(Model => Model.TongThanhToan, new { @readonly = "true", @Value = "0" })
        </div>
    </div>
    <hr />
    <p>
        <button class="btn btn-primary" type="submit" name="submit"><span class="glyphicon glyphicon-ok"></span>Lưu hóa đơn</button>&nbsp;
        <button class="btn btn-primary" type="submit" name="submit"><span class="glyphicon glyphicon-print"></span>Lưu & In hóa đơn</button>
        @Html.ActionLink("Thoát", "IndexGrid", null, new { @class = "btn btn-default" })
    </p>

    <div id="dialog-modal" style="display: none" title="Danh sách sản phẩm">
    </div>


    <div id="dialog-confirm" style="display: none" title="Lưu hóa đơn">
        <span>Bạn có muốn lưu hóa đơn ?</span>
    </div>

}
<div id="div-myModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Danh sách khách hàng</h4>
            </div>
            <div class="modal-body" id="modal-khachhang">
            </div>
        </div>
    </div>
</div>

<div id="div-DanhSachSanPham" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Danh sách Sản phẩm</h4>
            </div>
            <div class="modal-body" id="modal-div-DanhSachSanPham">
            </div>
        </div>
    </div>
</div>



<input type="hidden" id="rowsp" />
<input type="hidden" id="stt" value="1" name="stt" />
@Html.HiddenFor(p => p.TongThanhToan)


@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")


    <script type="text/javascript">

        $(document).ready(function () {
            $("#KhoID").addClass("form-control input-small");
            $("#NgayXuatKho").addClass("form-control");
            $("#NgayXuatKho").attr("placeholder", "Ngày xuất kho");
            $("#ID_NguoiXuatKho").val(@ViewBag.CurrentUserID);
        });

        //confirm submit
        var showDialog = true;
        $("input[name='submit']").click(function (e) {
            var input = $(this);
            var form = $(this).parents("form");
            if (showDialog) {
                // Prevent submit
                e.preventDefault();
                // Show dialog
                $("#dialog-confirm").dialog({
                    resizable: false,
                    height: 140,
                    modal: true,
                    buttons: {
                        'Lưu': function () {
                            $(this).dialog('close');
                            // Get the parent form
                            showDialog = false;
                            //form.submit();
                            //input.submit();
                            $(input).trigger("click");
                        },
                        'Không': function () {
                            $(this).dialog('close');
                            showDialog = true;
                        }
                    }
                });
            }
        });

        //mở dialog khách hàng
        $("#myModal").click(function () {
            var url = "/KhachHang/IndexPopUp"; // the url to the controller
            var id = $(this).attr('data-id'); // the id that's given to each button in the list
            $.get(url + '/' + id, function (data) {
                $("#modal-khachhang").html(data);
                $("#div-myModal").modal('show');
            });
        });

        //show dialog san pham
        function showattach(val) {
            $("#rowsp").val(val);
            $("#dialog-modal").dialog({
                width: 1000,
                height: 600,
                modal: true,
                open: function () {
                    $(this).load("/SanPhamInKho/IndexSPXK");
                },
            });
        }


        //chọn khách hàng
        function SelectKH(idKH) {
            $.ajax({
                url: '@Url.Action("GetKhachHangById", "KhachHang")',
                type: 'POST',
                data: { "valueSearch": idKH },
                dataType: 'json',
                success: function (response) {
                    var KhachHangDetail = response.KhachHangDetail;
                    var listKhachHangInfo = KhachHangDetail.split(";#");
                    $("#ID_KhachHang").val(listKhachHangInfo[0]);
                    $("#txtKhachHang").val(listKhachHangInfo[1]);
                    $("#txtNameKhachHang").val(listKhachHangInfo[2]);
                    $("#txtDiaChiKhachHang").val(listKhachHangInfo[3]);
                    $("#div-myModal").modal("hide");
                }
            });
        }

        $("#btnAddSP").click(function () {
            var stt = $("#stt").val();
            $("#stt").val(parseInt(stt) + 1);
            $("#tb-dsSanPham tbody").append("<tr>" +
              "<td><div class='input-group'> <input type='text' id='ma_sp" + stt + "' name='ma_sp" + stt + "' readonly='true' class='form-control'/><span class='input-group-btn'> <a class='btn btn-default btn-SelectSP' data-id='" + stt + "' name='ma_sp" + stt + "'><span class='glyphicon glyphicon-open' aria-hidden='true'></span></a></span></div></td>" +
              "<td><input type='text' id='SoLuong_" + stt + "' style='text-align:right' name='SoLuong_" + stt + "' value='0' class='form-control'/></td>" +
              "<td><input type='text' id='Gia_" + stt + "' style='text-align:right' name='Gia_" + stt + "' class='form-control'/></td>" +
              "<td><input type='text' id='ThanhTien_" + stt + "' style='text-align:right' name='ThanhTien_" + stt + "' value='0' class='form-control'/></td>" +
              "<td><input type='text' id='DonVi" + stt + "' name='DonVi" + stt + "' class='form-control'/></td>" +
              "<td style='text-align:center'><a href='' id='delete" + stt + "' class='btn btn-danger delrow'><span class='glyphicon glyphicon-remove'></span> Delete</a></td>" +
            "</tr>");
            //add row san pham
            $('.btn-SelectSP').click(function () {


                var url = "/SanPhamInKho/IndexSPXK"; // the url to the controller
                var id = $(this).attr('data-id'); // the id that's given to each button in the list

                $("#rowsp").val(id);
                $.get(url + '/' + id, function (data) {

                    $('#modal-div-DanhSachSanPham').html(data);
                    $('#div-DanhSachSanPham').modal('show');
                });
            });


            $("input[id*='SoLuong_']").blur(function () {
                var total = 0;
                $("input[id*='SoLuong_']").each(function () {
                    var soluong = $(this).val();
                    var srow = this.id.split('_');
                    var gia = $("#Gia_" + srow[1]).val().replace(/,/g, '');
                    $('#ThanhTien_' + srow[1]).val(soluong * gia);
                    $('#ThanhTien_' + srow[1]).formatCurrency();
                    total += soluong * gia;
                });

                $('#TongThanhToan').val(total);
                $('#TongThanhToan').formatCurrency();

            });

            $("input[id*='Gia_']").blur(function () {
                $(this).formatCurrency();
                var total = 0;
                $("input[id*='Gia_']").each(function () {
                    var gia = $(this).val().replace(/,/g, '');
                    var srow = this.id.split('_');
                    var soluong = $("#SoLuong_" + srow[1]).val();
                    $('#ThanhTien_' + srow[1]).val(soluong * gia);
                    $('#ThanhTien_' + srow[1]).formatCurrency();
                    total += soluong * gia;

                });

                $('#TongThanhToan').val(total);
                $('#TongThanhToan').formatCurrency();
            });
            $(".delrow").click(function () {
                $(this).parent().parent().remove();
                var total = 0;
                $("input[id*='SoLuong_']").each(function () {
                    var soluong = $(this).val();
                    var srow = this.id.split('_');

                    var gia = $("#Gia_" + srow[1]).val().replace(/,/g, '');
                    total += soluong * gia;

                });

                $('#TongThanhToan').val(total);
                $('#TongThanhToan').formatCurrency();

            })
        });

        function SelectSP(sp) {
            var row = $("#rowsp").val();

            var selectedValue = sp;
            $.ajax({
                url: '@Url.Action("GetProductXKById", "SanPham")',
                type: 'POST',
                data: { "selectedValue": selectedValue },
                dataType: 'json',
                success: function (response) {
                    var productDetails = response.ProductDetail;

                    var productdetail = productDetails.split(';#');

                    $("#ma_sp" + row).val(productdetail[0]);
                    $("#Gia_" + row).val(productdetail[1]);
                    $("#Gia_" + row).formatCurrency();
                    $("#DonVi" + row).val(productdetail[2]);

                }
            });
            $("#div-DanhSachSanPham").modal("hide");

        }



        $(':input').mouseover(function () {
            $(this).attr("title", $(this).val());
        });
    </script>
}
